CSS3 - "connecting" 2 classes animation [closed]
Posted
by
Nave Tseva
on Programmers
See other posts from Programmers
or by Nave Tseva
Published on 2012-12-03T16:27:51Z
Indexed on
2012/12/03
17:18 UTC
Read the original article
Hit count: 234
I have this CSS +HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>What</title>
<style type="text/css">
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
}
#box1 {
position: relative;
width: 500px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: 250px;
height: 150px;
-webkit-transition: all 1s;
font-size: large;
color: Black;
padding: 10px;
background: #D0D0D0;
opacity: 0;
}
@-webkit-keyframes myFirst {
0% {
right: 300px;
top: 150px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
;
right: 300px;
top: 200px;
opacity: 1;
}
}
#littlebox1 {
top: 200px;
position: absolute;
display: inline-block;
}
.littlebox1-sentence {
font-size: large;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
padding-right: 10px;
background: #D0D0D0;
border-radius: 10px; -webkit-transition: background .25s ease-in-out;
}
#littlebox1:hover ~ #box1 {
-webkit-transition: all 0s;
background: #909090;;
right: 300px;
top: 200px;
-webkit-animation: myFirst 1s;
-webkit-animation-fill-mode: initial;
opacity: 1;
}
.littlebox1-sentence:hover {
background: #909090;
}
.littlebox1-sentence:hover + .triangle {
border-right: 50px solid #909090;
}
.triangle {
position: relative;
width: 0;
height: 0;
border-right: 50px solid #D0D0D0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
right: 160px; -webkit-transition: border-right .25s ease-in-out;
}
.triangle:hover {
border-right:50px solid #909090;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$('.littlebox1-sentence').hover(function() {
$(this).css('background', '#909090');
$('.triangle').css('border-right', '50px solid #909090');
});
</script>
<script> $(function() {
$('.triangle').hover(function() {
$(this).css('border-right', '50px solid #909090');
$('.littlebox1-sentence').css('background', '#909090');
});
</script>
</head>
<body dir="rtl">
<div id="page">
<div id="littlebox1" class="littlebox1-sentence">put your mouse here</div><div id="littlebox1" class="triangle"> </div>
<div id="box1">
</div>
</div>
</body>
</html>
Live example you will find here: http://jsfiddle.net/FLe4g/12/
The problem here that something here wrong in the second jquery code.
I want that every time that I put the mouse on the box, or on the triangke they both will change ther color together.
when I put the mouse on the box it works fine, but when I put the mouse on the triangle it don't work.
Any suggestions how to fix this code?
© Programmers or respective owner
